<template>
    <div class="imageManage" style="height: 100%;">
        <el-container>
            <!-- 侧边栏组件 -->
            <el-aside width="">
                <CommonAside></CommonAside>
            </el-aside>
            <el-container>
                <!-- 顶部组件 -->
                <el-header>
                    <CommonHeader></CommonHeader>
                </el-header>
                <!-- 首页组件 -->
                <el-main>
                    <!-- <h1>HOME</h1> -->
                    <AnnouncementManageMain></AnnouncementManageMain>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import nihao2 from './nihao2'
    import CommonAside from "./CommonAside.vue";
    import CommonHeader from "./CommonHeader.vue";
    import AnnouncementManageMain from "./AnnouncementManageMain.vue"
    export default {
        name: "imageManage",
        components: {
            CommonAside,
            CommonHeader,
            AnnouncementManageMain
        }
    }
</script>
<style>
    html,
    body {
        height: 100%;
    }

    .el-header {

        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {

        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {

        background-color: #ffffff00;
        color: #333;
        overflow-x: hidden;
    }

    body>.el-container {
        height: calc(100%-40px);
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>